<template>
    <div class="wrapper">
        <div class="wrapper-left">
            <el-form ref="form" label-width="120px">
                <el-form-item label="from">
                    <el-select v-model="fromType" placeholder="请选择当前坐标类型">
                        <el-option 
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="经纬度(lat,lng)">
                    <el-input type="textarea" placeholder="支持lat,lng 或者 geojson格式字符串" v-model="fromValue" rows="20"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="wrapper-right">
            <el-form ref="form" label-width="120px" >
                <el-form-item label="to">
                    <el-col :span="18">
                        <el-select v-model="toType" placeholder="请选择目标坐标类型">
                            <el-option 
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"/>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" @click="transform()">转换坐标</el-button>
                    </el-col>
                </el-form-item>
                <el-form-item label="转换结果">
                    <!-- <div class="result" v-html="toValue"></div> -->
                    <el-input type="textarea" v-model="toValue" rows="20"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import gcoord from 'gcoord'

export default {
    data(){
        return {
            options: [{
                value: 'WGS84',
                label: 'gcoord.WGS84'
                }, {
                value: 'GCJ02',
                label: 'gcoord.GCJ02'
                }, {
                value: 'BD09',
                label: 'gcoord.BD09'
                }
            ],
            fromType: '',
            fromValue: '',
            toType: '',
            toValue: ''
        }
    },
    methods: {
        // 转换经纬度
        transform(){
            if(this.fromType.length ==0 || this.fromValue.length ==0 || this.toType.length ==0 ){
                this.$message({
                    message: '请填写信息',
                    type: 'warning'
                });
                return 
            }
            const loading = this.$loading({
                lock: true,
                text: '坐标转换中...',
                spinner: 'el-icon-loading'
                });
            // geoJson
            if(this.fromValue.charAt(0) == '{'){
                this.toValue = JSON.stringify(gcoord.transform(this.fromValue, gcoord[this.fromType], gcoord[this.toType]))
            }else{
                // lat,lng
                var latLngArr = this.fromValue.split('\n')
                var result = [] ;
                for(var i=0 ; i< latLngArr.length ; i++){
                    var latLng = latLngArr[i].split(',')
                    var latLngTemp = gcoord.transform([latLng[0], latLng[1]], gcoord[this.fromType], gcoord[this.toType]) 
                    result.push(latLngTemp.join(','))
                }
                
                this.toValue = result.join('\n')

            }
            loading.close();
            this.$message('坐标转换成功！');

        }
    }
}
</script>

<style>
.wrapper {
    display: flex;
}
.wrapper-left,.wrapper-right {
    flex-grow: 1;
}
.result {
    border-radius: 4px;
    white-space: pre;
    background: #eee;
    height: 420px;
    line-height: 22px;
    overflow-y: auto;
}
</style>
